<template>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-inputs">
        <select v-model="searchForm.communityId" class="input-item">
          <option value="">选择小区</option>
          <option v-for="item in communityList" :key="item.id" :value="item.id">{{ item.name }}</option>
        </select>
      </div>
      <div class="search-buttons">
        <button class="btn-search" @click="searchNotices">
          <i class="icon-search"></i> 查询
        </button>
        <button class="btn-reset" @click="resetSearch">
          <i class="icon-reset"></i> 重置
        </button>
      </div>
    </div>

    <!-- 通知列表 -->
    <div class="notice-list">
      <div class="list-header">
        <h3>数据列表</h3>
        <button class="btn-add" @click="addNotice">
          <i class="icon-add"></i> 添加通知
        </button>
      </div>

      <!-- 通知表格 -->
      <table class="notice-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>通知标题</th>
            <th>所属小区</th>
            <th>通知类型</th>
            <th>通知对象</th>
            <th>发布人</th>
            <th>发布时间</th>
            <th>发布类型</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="noticeList.length > 0">
          <tr v-for="(item, index) in noticeList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>
              <a class="notice-title" @click="viewNotice(item)">{{ item.title }}</a>
            </td>
            <td>{{ item.communityName }}</td>
            <td>{{ item.noticeTypeName }}</td>
            <td>{{ item.object === 0 ? '业主' : '物业' }}</td>
            <td>{{ item.publisher }}</td>
            <td>{{ item.publishTime }}</td>
            <td>{{ getPublishTypeText(item.publishType) }}</td>
            <td>{{ item.status === 0 ? '未审核' : '已审核' }}</td>
            <td class="action-btns">
              <button class="btn-view" @click="viewNotice(item)">
                <i class="icon-view"></i> 查看
              </button>
              <button class="btn-delete" @click="deleteNotice(item)">
                <i class="icon-delete"></i> 删除
              </button>
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="8" class="no-data">
              <div v-if="isLoading">正在加载数据...</div>
              <div v-else>暂无通知数据</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PropertyNotice',
  data() {
    return {
      searchForm: {
        communityId: 0,
      },
      noticeList: [],
      communityList: [],
      isLoading: false
    }
  },
  created() {
    // 页面创建时加载数据
    this.fetchCommunities()
    this.fetchNotices()
  },
  methods: {
    /**
     * 获取小区列表
     * 从服务器获取小区数据
     */
     async fetchCommunities() {
      this.isLoading = true;
      try {
        // 发起API请求获取小区列表
        const response = await this.$axios.get('/api/notice-server/notice/queryAllCommunity');
        if (response.data && response.data.code === 200) {
          this.communityList = response.data.data || [];
        } else {
          this.$message.error('获取小区列表失败: ' + (response.data.message || '未知错误'));
        }
      } catch (error) {
        this.$message.error('获取小区列表失败');
        console.error('获取小区列表失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 获取通知列表
    fetchNotices() {
      this.isLoading = true
      
      // 构建查询参数
      // const communityId = parseInt(this.searchForm.communityId) || 0
      // console.log('发送请求：', communityId, typeof communityId)
      
      // 调用后端API获取通知列表
      this.$axios.post('/api/notice-server/notice/queryNotices', this.searchForm.communityId, {
        headers: {
          'Content-Type': 'application/json'
        },
        transformRequest: [data => JSON.stringify(data)]
      })
        .then(response => {
          if (response.data && response.data.code === 200) {
            this.noticeList = response.data.data || []
          } else {
            console.error('获取通知列表失败:', response.data.message)
            // 使用模拟数据
            
          }
        })
        .catch(error => {
          console.error('获取通知列表出错:', error)
          // 使用模拟数据
      
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    
    searchNotices() {
      // 执行查询逻辑
      this.fetchNotices()
    },
    
    resetSearch() {
      // 重置搜索表单
      this.searchForm = {
        communityId: ''
      }
      // 重置后立即查询
      this.fetchNotices()
    },
    
    addNotice() {
      // 跳转到添加通知页面
      this.$router.push('/property/senProperty')
    },
    
    viewNotice(item) {
      console.log('查看通知', item)
      //打印item.id 类型
      console.log('item.id 类型', typeof item.id)
      // 跳转到查看通知详情页面
      this.$router.push(`/property/noticeDetail/${item.id}`)
    },
    
    deleteNotice(item) {
      if (!confirm(`确定要删除通知"${item.title}"吗？`)) {
        return
      }
      
      this.isLoading = true
      // 调用后端API删除通知
      this.$axios.delete(`/api/notice-server/notice/${item.id}`)
        .then(response => {
          if (response.data && response.data.code === 200) {
            alert('删除成功')
            // 重新加载通知列表
            this.fetchNotices()
          } else {
            console.error('删除通知失败:', response.data.message)
            alert('删除失败: ' + response.data.message)
          }
        })
        .catch(error => {
          console.error('删除通知出错:', error)
          alert('删除失败，请重试')
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    getPublishTypeText(publishType) {
      switch (publishType) {
        case 0:
          return '立即发布';
        case 1:
          return '指定发布';
        case 2:
          return '定时发布';
        default:
          return '未知类型';
      }
    }
  },
  watch: {
    // 移除watch
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-inputs {
  display: flex;
  gap: 10px;
}

.input-item {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 160px;
}

.search-buttons {
  display: flex;
  gap: 10px;
}

.btn-search, .btn-reset {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-search {
  background-color: #1890ff;
  color: white;
}

.btn-reset {
  background-color: #fff;
  border: 1px solid #ddd;
}

.notice-list {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.btn-add {
  background-color: #1890ff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.notice-table {
  width: 100%;
  border-collapse: collapse;
}

.notice-table th, .notice-table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.notice-table th {
  background-color: #f8f8f8;
  font-weight: 500;
}

.notice-title {
  color: #1890ff;
  cursor: pointer;
}

.action-btns {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.action-btns button {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  color: #1890ff;
  background: none;
  cursor: pointer;
  font-size: 12px;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>